<template>
  <div class="home">
    <!-- 导航栏 -->
    <div>
      <van-nav-bar
      title="首页"
      fixed
      border
      />
    </div>
    <!-- 轮播图 -->
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" duration="1000" indicator-color="white">
        <van-swipe-item>
          <!-- 图片宽高比例400/208 -->
          <van-image
           width="19.2rem"
            height="10rem"
            src="https://p0.ssl.qhimgs1.com/sdr/400__/t0190128846c16b9b1e.png"
          />
        </van-swipe-item>
        <van-swipe-item>
           <van-image
            width="19.2rem"
            height="10rem"
            src="https://p2.ssl.qhimgs1.com/sdr/400__/t01773e3d46cc2f9e78.jpg"
          />
        </van-swipe-item>
         <van-swipe-item>
          <van-image
           width="19.2rem"
            height="10rem"
            src="https://p1.ssl.qhimgs1.com/sdr/400__/t019f349ec25c01674b.jpg"
          />
        </van-swipe-item>
        <van-swipe-item>
           <van-image
            width="19.2rem"
            height="10rem"
            src="https://p2.ssl.qhimgs1.com/sdr/400__/t01b75d0576b70d5032.png"
          />
        </van-swipe-item> 
      </van-swipe>
    </div>
    <!-- 分类 -->
    <div class="fenglei">
      <h3>穿搭分类</h3>
      <van-grid :column-num="5" router>
        <van-grid-item replace to="/Chinese">
          <van-image
            round
            height="75%"
            width="75%"
            src="https://p3.ssl.qhimgs1.com/sdr/400__/t019e97fea468f451dd.jpg"
          />
          <p>中国风</p>
        </van-grid-item>
        <van-grid-item replace to="/Korean">
          <van-image
            round
            height="75%"
            width="75%"
            src="https://p0.ssl.qhimgs1.com/sdr/400__/t017b114f54689e8c14.jpg"
          />
          <p>韩系风</p>
        </van-grid-item>
        <van-grid-item replace to="/European">
          <van-image
            round
            height="75%"
            width="75%"
            src="https://p0.ssl.qhimgs1.com/bdr/460__/t01df43b15c9b51e5c0.jpg"
          />
          <p>欧系风</p>
        </van-grid-item>
        <van-grid-item replace to="/Japanese">
          <van-image
            round
            height="75%"
            width="75%"
            src="https://p0.ssl.qhimgs1.com/bdr/460__/t01b22125def5021648.jpg"
          />
          <p>日系风</p>
        </van-grid-item>
        <van-grid-item replace to="/Other">
          <van-image
            round
            height="75%"
            width="75%"
            src="https://p0.ssl.qhimgs1.com/bdr/460__/t0160bb614e4a723716.webp"
          />
          <p>其他风</p>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 底部选项卡 -->
    <div>
        <van-tabbar 
        route 
        v-model="active" 
        active-color="#ee0a24" 
        inactive-color="#000" 
        safe-area-inset-bottom 
        fixed  
        placeholde 
        border>
          <van-tabbar-item replace to="/home" icon="wap-home-o">首页</van-tabbar-item>
          <van-tabbar-item replace to="/recommend" icon="good-job-o">推荐</van-tabbar-item>
          <van-tabbar-item replace to="/message" icon="chat-o">消息</van-tabbar-item>
          <van-tabbar-item replace to="/me" icon="https://b.yzcdn.cn/vant/icon-demo-1126.png">我的</van-tabbar-item>
        </van-tabbar>
    </div>
    
  </div>
</template>

<script>



export default {
  data() {
    return {
      active:'home'
    };
  },
   methods: {
    
  },
}
</script>
<style scoped>
.van-grid .van-grid-item .p{
  height: 25%;
  text-align: center;
}
/* .van-grid .van-grid-item{
  padding-top: -10%;
  padding-bottom: -20%;
} */
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
  .my-swipe .van-swipe-item .van-image{
    margin: auto;
    margin-top: 10%;
  }
  h3{
    margin-left: 5%;
  }
</style>
